<template>
  <div class="page-style">
    <el-form ref="form" :model="form" label-width="120px" :rules="formRules">
      <el-form-item v-permission="['admin']" label="选择品牌" prop="brand_id">
        <brand-select :val-prop="form.brand_id" @changeVal="brandSelect" />
      </el-form-item>
      <el-form-item label="新闻标题" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="作者" prop="work_people">
        <el-input v-model="form.work_people" />
      </el-form-item>
      <el-form-item label="展示图片" prop="news_img">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl + '/oss_upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.news_img" :src="form.news_img" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item label="新闻简介" prop="sub_content">
        <el-input v-model="form.sub_content" type="textarea" />
      </el-form-item>
      <el-form-item label="新闻内容" prop="content">
        <tinymce v-model="form.content" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { operationBrandNews, getBrandNewsDetails } from '@/api/brand'
import brandSelect from '@/components/BrandSelect'
import permission from '@/directive/permission'
// import { getNow } from '@/utils/index'
export default {
  directives: {
    permission
  },
  components: {
    Tinymce,
    brandSelect
  },
  data() {
    const editer = (rule, value, callback) => {
      console.log(value)
      if (!value) {
        callback(new Error('请填写新闻内容'))
      } else {
        callback()
      }
    }
    return {
      uploadUrl: process.env.VUE_APP_BASE_API,
      form: {
        brand_id: this.$store.state.user.brand_id,
        title: '',
        content: '',
        sub_content: '',
        news_img: '',
        work_people: ''
      },
      type: '1',
      formRules: {
        brand_id: [
          { required: true, message: '请输入选择品牌', trigger: 'change' }

        ],
        title: [
          { required: true, message: '请输入新闻标题', trigger: 'blur' }
        ],
        work_people: [
          { required: true, message: '请输入作者名称', trigger: 'blur' }
        ],
        content: [
          { required: true, validator: editer, trigger: 'blur' }
        ],
        sub_content: [
          { required: true, message: '请输入新闻简介', trigger: 'blur' }
        ],
        news_img: [
          { required: true, message: '请输入上传新闻展示图片', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    // console.log(this.$route.query)
    // if (this.$route.query.hasOwnProperty('id')) {
    if (Object.prototype.hasOwnProperty.call(this.$route.query, 'id')) {
      this.type = '2'
      const data = {
        id: this.$route.query.id
      }
      this.getNewsDetails(data)
    }
    // if (!this.$route.query.length) {
    //   console.log(this.$route.query)
    //   const data = {
    //     id: this.$$route.query
    //   }
    //   this.getNewsDetails(data)
    // }
  },
  methods: {
    brandSelect(val) {
      this.form.brand_id = val
    },
    handleAvatarSuccess(res, file) {
      // console.log(res, file)
      this.form.news_img = res
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type.split('/')[0] === 'image'
      if (!isJPG) {
        this.$message.error('请上传图片!')
      }
      return isJPG
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.form.brand_id) {
            this.$message.warning('请选择品牌!')
            return false
          }
          const data = {
            type: this.type,
            pro: JSON.stringify(this.form)
          }
          const formData = new FormData()
          for (const key in data) {
            console.log(key)
            formData.append(key, data[key])
          }
          console.log(formData)
          this.operatioNews(formData)
        } else {
          this.$message.info('请完善必填信息！')
        }
      })
    },
    operatioNews(data) {
      operationBrandNews(data).then(res => {
        if (res.code === 200) {
          this.$message.success('新闻添加成功！')
          this.$router.go(-1)
        }
      })
    },
    getNewsDetails(data) {
      getBrandNewsDetails(data).then(res => {
        // console.log(res)
        this.form = res
      })
    }
  }

}
</script>

<style lang="scss" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
  }
  .avatar {
    width: 130px;
    height: 130px;
    display: block;
  }
</style>
